<template>
  <div class="special-item">
    <div class="special-header" :style="{ paddingLeft: paddingLeft[none.level] }">
      <div class="expand" v-if="!$util.isEmpty(none.child)">
        <i
          class="icon"
          :class="[show ? 'el-icon-remove' : 'el-icon-circle-plus']"
          @click="toggleChildren"
        ></i>
      </div>
      <div class="expand" v-if="$util.isEmpty(none.child) && none.level == 1">
        <i
          class="icon"
          :class="[show ? 'el-icon-remove' : 'el-icon-circle-plus']"
          @click="toggleChildren"
        ></i>
      </div>
      <div class="header-left">
        <div
          v-if="!$util.isEmpty(none.child) && none.level == 1"
          class="title stair big-title"
          :class="{ 'big-title': none.level == 1 }"
          @click="toggleChildren"
        >
          {{ none.title }}
        </div>
        <div v-else class="title" :class="{ 'big-title': none.level == 1 }">{{ none.title }}</div>
        <div class="progress">
          <el-progress
            :percentage="handlePercentage(none.answered_num, none.topic_count)"
            stroke-width="8"
            :show-text="false"
            :style="{
              width: progressWidth(none.level, none.child)
            }"
          ></el-progress>
          <span class="num">{{ `${none.answered_num}/${none.topic_count}` }}</span>
          <span class="num">正确率：{{ none.accuracy }}%</span>
        </div>
      </div>
      <div class="header-right">
        <template v-if="none.level == 1">
          <template v-if="data.has_bought == 0">
            <div class="price" v-if="data.user_price > 0">
              {{ data.user_price | formatMoney }}
            </div>
            <div class="free" v-else>免费</div>
          </template>
          <template v-else>
            <div class="price">已购买</div>
          </template>
        </template>
        <template v-if="data.has_bought == 0 && data.user_price > 0">
          <div class="btn primary" v-if="none.level == 1" @click="clickBtn(1, none)">
            购买
          </div>
          <div class="icon edu-icon-zhuanxiang_answer gray" v-else @click="clickBtn(3)"></div>
        </template>
        <template v-else>
          <div
            class="btn"
            :class="[none.level == 1 ? 'primary' : 'plain']"
            v-if="none.level == 1"
            @click="clickBtn(2, none)"
          >
            开始答题
          </div>
          <div
            class="icon edu-icon-zhuanxiang_answer colours"
            v-else
            @click="clickBtn(2, none)"
          ></div>
        </template>
      </div>
    </div>
    <el-collapse-transition>
      <template v-if="!$util.isEmpty(none.child) && show">
        <div>
          <TreeSpecial
            :none="item"
            :data="none"
            v-for="item in none.child"
            :key="item.id"
          ></TreeSpecial>
        </div>
      </template>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  name: 'TreeSpecial',
  props: {
    // 当前数据
    none: {
      type: Object,
      default: function() {
        return {}
      }
    },
    // 首层数据
    data: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      paddingLeft: { 1: '30px', 2: '56px', 3: '81px' },
      show: false
    }
  },
  methods: {
    progressWidth(index, child) {
      let width = { 1: 400, 2: 375, 3: 350 }
      let node = this.$util.isEmpty(child) && index != 1 ? 25 : 0
      return width[index] + node + 'px'
    },
    // 展开子级
    toggleChildren() {
      this.show = !this.show
    },
    handlePercentage(num, count) {
      if (count <= 0) return 0
      let number = Math.floor((num / count) * 100)
      return number < 0 ? 0 : number > 100 ? 100 : number
    },
    // 按钮
    clickBtn(index, item) {
      const _this = this
      let calc = {
        // 购买
        1: function() {
          _this.$globalToLogin(() => {
            _this.$router.push({
              path: '/buy/exam',
              query: {
                id: item.id,
                type: 'special'
              }
            })
          })
        },
        // 答题按钮
        2: function() {
          let query = {
            id: item.id,
            pid: item.pid
          }
          if (item.answered_num === 0) {
            calc.push(query)
          } else {
            _this.$messageBox
              .confirm('是否继续上次作答？', {
                confirmButtonText: '继续答题',
                cancelButtonText: '重新开始',
                distinguishCancelAndClose: true
              })
              .then(() => {
                query = {
                  ...query,
                  topic_id: item.last_practice
                }
                calc.push(query)
              })
              .catch(action => {
                if (action === 'cancel') {
                  // 重新开始，清空记录
                  _this.$api.deleteExamSpecialRecord(
                    {
                      special_id: item.id
                    },
                    () => {
                      calc.push(query)
                    }
                  )
                }
              })
          }
        },
        // 未购买答题按钮
        3: function() {
          _this.$message.info(`请先购买`)
        },
        push: query => {
          _this.$router.push({
            path: '/exam/special/topic',
            query: query
          })
        },
        run: function(fn) {
          return fn && fn()
        }
      }
      calc.run(calc[index])
    }
  }
}
</script>

<style lang="scss" scoped>
.special-item {
  margin-top: 10px;
  padding-top: 22px;
  padding-bottom: 26px;
  padding-right: 30px;
  background-color: #ffffff;
  .special-item {
    padding-right: 0;
  }
  .special-header {
    position: relative;
    display: flex;
    .expand {
      width: 25px;
      padding-top: 2px;
      .icon {
        font-size: 14px;
        @include edu-color-auxiliary;
        cursor: pointer;
      }
      .edu-icon-Arrowtopup {
        display: block;
        font-size: 14px;
        @include edu-color-auxiliary;
        cursor: pointer;
        transform: rotate(180deg);
        transition: all 0.3s;
        transform-origin: 7px 7px;
        &.active {
          transform: rotate(0deg);
        }
      }
    }
    .level {
      margin-top: 6px;
      width: 6px;
      height: 6px;
      border-radius: 3px;
      margin-right: 6px;
      @include edu-color-primary(background-color);
    }
    .header-left {
      .title {
        font-size: 15px;
        font-weight: 500;
        color: $text-color-secondary;
      }
      .big-title {
        color: $text-color-import;
        font-weight: 600;
      }
      .stair {
        cursor: pointer;
      }
      .progress {
        margin-top: 12px;
        display: flex;
        align-items: center;
        .num {
          margin-left: 12px;
          font-size: 12px;
          font-weight: 400;
          color: $text-color-secondary;
        }
        .num + .num {
          margin-left: 20px;
        }
      }
    }
    .header-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      .price,
      .free {
        font-size: 14px;
        font-weight: 500;
      }
      .price {
        color: $text-color-price;
      }
      .free {
        color: $text-color-free;
      }
      .btn {
        margin-left: 40px;
        width: 94px;
        height: 32px;
        line-height: 30px;
        text-align: center;
        border-radius: 19px;
        border-width: 1px;
        border-style: solid;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        box-sizing: border-box;
      }
      .icon {
        font-size: 24px;
        cursor: pointer;
        margin-right: 35px;
        &.gray {
          color: #dcdfe6;
        }
        &.colours {
          @include edu-color-auxiliary;
        }
      }
      .primary {
        color: #ffffff;
        @include edu-color-primary(background-color);
        @include edu-color-primary(border-color);
      }
      .plain {
        @include edu-color-auxiliary;
        @include edu-color-primary(border-color);
        &:hover {
          color: #ffffff;
          @include edu-color-primary(background-color);
        }
      }
    }
  }
}
</style>
